import React, { useState, useEffect,useContext } from 'react'
import Header from '../../components/Header/Header'
import { SideBar, SearchBar, Card } from 'antd-mobile';
import "./Cate.less"
import { reqgetcate, reqgetgoods } from '../../http/api';
import { MyContext } from '../../App';

const Cate = () => {
    //初始化
    const [cate, setCate] = useState([])
    const [n, setn] = useState(1)
    const [goods, setGoods] = useState([])
    const {state:{pre},dispatch} = useContext(MyContext)

    //获取cate
    const reqCate = () => {
        reqgetcate().then(res => {
            setCate(res.data.list)
        })
    }
    //  获取goods
    const reqGoods = () => {
        reqgetgoods().then(res => {
            setGoods(res.data.list)
        })
    }
    useEffect(() => {
        reqCate()
        reqGoods()
    }, [])




    return (
        <div>
            <Header text="商品分类"></Header>
            {/* 搜索框 */}
            <header>
                <div>
                    <SearchBar placeholder='请输入内容' />
                    <button>搜索</button>
                </div>
            </header>
            <content>
                <SideBar activeKey={n + ""} onChange={(e) => setn(Number(e))}>
                    {cate.map(item => (
                        <SideBar.Item
                            key={item.id}
                            title={item.catename}
                        />
                    ))}
                </SideBar>
                <div>
                    {goods.map((item) => {
                        return (
                            <Card title={item.goodsname} onClick={() => { }}>
                                <img src={pre + item.img} alt="" width={60} />
                                <div>
                                    <p>价格:{item.price}</p>
                                    <p>原价：{item.market_price}</p>
                                </div>
                                <button onClick={() => this.props.history.push("/detail/id=" + item.id)}>加入购物车</button>
                            </Card>
                        )
                    })}
                </div>
            </content>
            <div>goods:{JSON.stringify(goods)}</div>
        </div>
    )
}

export default Cate